<template>
	<view>
		<!-- 交易物品详情页 -->
		<view class="concent">
			<!-- 设置轮播图 -->
			<view class="photo">
				<swiper indicator-dots="true" autoplay="true" interval="3000" style="height: 100%;width: 100%;">
					<swiper-item v-for="(item,i) in goods.pic" :key="i">
						<img :src=item alt="" style="height: 100%;width: 100%;" @click="preview(i)">
					</swiper-item>
				</swiper>
			</view>
			<!-- 标题 -->
			<view class="information">
				<view class="head">
					<image class="head" :src="goods.avatar" mode=""></image>
				</view>
				<view class="goodsInfo">
					<text class="goodsName">{{goods.goods_name}}</text>
					<text class="time">{{goods.seller_name}}发布于{{goods.time}}前</text>
				</view>
				<view class="price">${{goods.price}}</view>
			</view>
			<!-- 介绍物品信息 -->
			<view class="introduce">
				<text>{{goods.introduce}}</text>
			</view>
			<!-- 功能模块 -->
			<view class="function">
				<view v-if="!is_salled">
					<text v-if="goods.is_collected">已收藏</text>
					<button class="btn1" v-if="!goods.is_collected" @click="changeCollection()">收藏</button>
					<button class="btn1" v-if="goods.is_collected" @click="changeCollection()">取消收藏</button>
					<button class="btn2" @click="gotobuy()">购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState('buji_search', ['goods']),

			is_salled() {
				return this.goods.buyer_id !== 0 ? true : false
			}
		},
		methods: {

			gotobuy() {
				uni.navigateTo({
					url: "/subpkg/buy/buy"
				})
			},
			preview(i) {
				// 调用 uni.previewImage() 方法预览图片
				console.log(i, this.goods.picList[i]);
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.goods.picList[i]
				})
			},
			changeCollection() {
				let goodsId = this.goods.goods_id
				let isCollected = this.goods.is_collected
				console.log(goodsId, isCollected, '*');
				wx.cloud.callFunction({
					name: 'postCollections',
					data: {
						goodsId: goodsId,
						isCollected: isCollected
					},
					// complete: res => {
					// 	 console.info('complete', res);
					// },
					success: res => {
						console.info('success,修改成功');
					},
					fail: res => {
						console.info('fail', res);
					}
				});
				this.goods.is_collected = !this.goods.is_collected
			}
		}
	}
</script>

<style lang="scss">
	.concent {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.photo {
		margin: 10rpx;
		width: 98%;
		justify-content: center;
		height: 700rpx;

	}

	/* 物品信息介绍 */
	.information {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 40rpx;
		height: 140rpx;
		margin-top: 10rpx;
		width: 100%;
		background-color: #f8f8f8;
	}

	/* 头像样式 */
	.head {
		width: 130rpx;
		height: 130rpx;
		border-radius: 65rpx;

	}

	/* 商品信息 */
	.goodsInfo {
		width: 400rpx;
		height: 120rpx;
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
	}

	/* 商品名称 */
	.goodsName {
		width: 360rpx;
		height: 60rpx;
		font-size: 48rpx;
		font-weight: bold;
		line-height: 48rpx;
		margin-top: 10rpx;
		// 溢出文字省略号
		// white-space: nowrap;
		// overflow-x: hidden;
		// text-overflow: ellipsis;
	}

	/* 发布时间 */
	.time {
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
		color: gray;
	}

	/* 价格 */
	.price {
		height: 75rpx;
		font-size: 50rpx;
		text-align: center;
		font-weight: bold;
		margin-top: 25rpx;
		color: #C00000;
	}



	.introduce {
		margin-left: 40rpx;
		width: 90%;
		height: 450rpx;
		overflow: scroll;
		border: solid black 1rpx;
		border-left: none;
		border-right: none;

		text {
			padding: 0 40rpx;
		}

	}

	.function {
		width: 100%;
		height: 100rpx;
		position: absolute;
		bottom: 1%;
		display: flex;
		flex-direction: row;
		text-align: center;
		font-size: 35rpx;

	}

	.function text {
		font-size: 35rpx;
		margin-top: 20rpx;
		margin-left: 50rpx;
	}

	.btn1 {
		background-color: #ffaa00;
		position: absolute;
		right: 150rpx;
		top:0;
		height: 76rpx;
		border-radius: 36rpx 0 0 36rpx;
		border: 1rpx black solid;
		line-height: 72rpx;
		font-size: 36rpx;
	}

	.btn2 {
		background-color: #C00000;
		position: absolute;
		top: 0;
		right: 25rpx;
		height: 76rpx;
		border-radius: 0 36rpx 36rpx 0;
		border: 1rpx black solid;
		line-height: 72rpx;
		font-size: 36rpx;
	}
</style>
